<template>
	<div id="xiangqing">
        <div id="head">
		    <van-nav-bar
		      style="background-color:white"
			  title="产品详情"
			  left-text=" "
			  right-text="按钮"
			  left-arrow
			  fixed
			  border
			  @click-left="onClickLeft()"
			  @click-right="onClickRight"
			>  
			    <span slot="title" style="color:#4fc08d">产品详情</span>
	            <van-icon name="cart" slot="right" />
			</van-nav-bar>
	    </div>
	    <div class="img">
	    	 <div class="pic"><img width="250px" height="200px" :src="product.small_image" ></div>
	    </div>
	    <div class="dec">
	    	<div class="name"><span>{{this.$route.query.vname}}</span></div>
	    	<div class="price"> <span><b>{{this.$route.query.price|moneyFormat}}/斤</b></span></div>
	    </div>
	    <div class="pro">
	    	<div class="xinxi">
	    		<div class="title"><span>产品属性信息</span></div>
                <hr/>
                <div class="text"><span>包装方式：******</span></div>
                <div class="text"><span>上市时间：******</span></div>
                <div class="text"><span>所属小区：东辽小区</span></div>
	    	</div>
	    </div>
	    <div class="btn"  @click="addToCart(product)"><van-button size="large" type="primary" >加入购物车</van-button></div>
	</div>
</template>
<script>
import { NavBar } from 'vant';
import { Icon } from 'vant';
import { Button } from 'vant';
import  {mapMutations,mapState} from 'vuex'
import {Toast} from 'vant'
import { getHomeData,addGoodsToCart } from './../../service/api/index.js'  //拿到index.js 里面的getHomeData方法

export default {
       name:"Xiangqing",
      
      data(){
         return {
            product:''
         };
      },
     
      props:{
     
        },


       computed:{
            ...mapState(["userInfo"])
       },
		  methods: {
       ...mapMutations(["ADD_GOODS"]),

          async addToCart(product){
       //    console.log(this.$router);
                if (this.userInfo.token) { //已经登录
                    //调用addGoodsToCart将商品信息同步到服务器端 
                  //  console.log(product.vname);
                    //用户id,蔬菜id,蔬菜名，蔬菜价格
                     let result = await addGoodsToCart(this.userInfo.token,this.$route.query.vid,this.$route.query.vname,this.$route.query.price,this.$route.query.pzleixing);
                     console.log(result);
                     if (result.status===200) {
                          this.ADD_GOODS({  
                           goodsId:this.$route.query.vid,
                           goodsName:this.$route.query.vname,
                           goodsPrice:this.$route.query.price,
                           pzleixing:this.$route.query.pzleixing
                       });
                       //提示用户
                       Toast({
                          message:'添加到购物车成功',
                          duration:800
                       });       
                     }
                    }else{
                        this.$router.push('/login');
                     }
              },        //   ---async


		    onClickLeft() {
          if(this.$route.query.fromsy){
             this.$router.push({ path:'/' })
          }else if (this.$route.query.fromfl) {
              this.$router.push({ path:'/dashboard/category' })
          }

		 
        },
		    onClickRight() {
		      this.$router.push({ path:'/dashboard/cart' })
		    }
		  },

       created(){
            //  console.log(this.$route);
                   //暂时借用别的接口图片
                     getHomeData().then((response)=>{
                     if (response.success) {
                      this.product = response.data.list[3].product_list[0];
                   //  console.log(this.product);
                   }
              }).catch(error=>{
                   // todo......
                    console.log(error);
              })
         }   //  ----createed
}
</script>
<style lang="less" scoped>
   #xiangqing{
   	 position:relative;
   	 z-index: 10;
     width:100%;
     height:100%;
     background-color:#f5f5f5;
     overflow:hidden;
   }
  .img{
      width: 100%;
      height:220px;
      margin-top:50px;
      background-color: white;      
  }

  .pic{
      width:220px;
      height:170px;
      margin:0 auto;
  }
   .dec{
   	 position:absolute;
   	 width:100%;
   	 height:100px;
   	 background-color: white; 
   	 margin-top:10px; 
   	 margin-bottom: 10px;
   }
   .name{
   	  position:absolute;
   	  line-height:px;
   	  font-size:15px;
   	  left:20px;
   	  top:20px;
   }
   .price{
   	line-height:25px;
   	font-size:25px;
   	color:red;
   	position:absolute;
   	left:20px;
   	top:50px;
   }
    .pro{
       position:absolute;
       width:100%;
       height:160px;
       background-color: white;
       margin-top:120px;
       margin-bottom: 0px;
    }
    .xinxi{
        width:90%;   
    	height:130px;
    	position:absolute;
        left:20px;
        top:15px;
      	line-height:18px;
     	font-size:18px;
   	    color:#999;
    }
    .text{
    	margin-top: 5px;
    	margin-bottom: 5px;
    }
    .btn{
    	width:100%;
    	position:absolute;
        bottom:0px;
    }

</style>